<style module>
.me {
  width: 100%;
  flex: 1 1 auto;
  height: 100%;
}
</style>
<template>
  <div ref="myChart" :class="$style.me" :style="chartStyle"></div>
</template>

<script>
import { responsiveSize } from "public/tools/common.js";
export default {
  name: "pieChart",
  data() {
    return {
      myChart: {},
      series: [],
    };
  },
  props: {
    data: {
      default: () => {
        return [
          { value: 1048, name: "Search Engine" },
          { value: 735, name: "Direct" },
          { value: 580, name: "Email" },
          { value: 484, name: "Union Ads" },
          { value: 300, name: "Video Ads" },
        ];
      },
    },
    chartStyle: {
      default: () => {},
    },
    config: {
      default: () => {
        return {
          toolbox: true,
          legend: true,
          radius: ["0%", "50%"],
          center: ["50%", "50%"],
          roseType: "radius",
          label: true,
          labelLine: true,
          color: [
            "#5470c6",
            "#91cc75",
            "#fac858",
            "#ee6666",
            "#73c0de",
            "#3ba272",
            "#fc8452",
            "#9a60b4",
            "#ea7ccc",
          ],
        };
      },
    },
    //国际化
    language: {
      default: () => {
        return {
          "en-US": {
            title: "title",
          },
          "zh-CN": {
            title: "标题",
          },
        };
      },
    },
  },
  computed: {
    option() {
      return {
        title: {
          text: this.language[this.G_Locale].title,
        },
        tooltip: {
          trigger: "item",
          textStyle: {
            color: "#fff",
            fontSize: responsiveSize(12),
          },
        },
        color: this.config.color,
        toolbox: {
          show: this.config.toolbox,
          feature: {
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        legend: {
          show: this.config.legend,
          textStyle: {
            color: "#fff",
            fontSize: responsiveSize(14),
          },
          orient: this.config.legendOrient||'horizontal',
          right: this.config.legendRight||'auto',
        },
      };
    },
  },
  watch: {
    data: {
      handler(data) {
        if (!data.values) {
          return;
        }
        this.initChartOption();
      },
      deep: true,
    },
  },
  mounted() {
    this.handleSetChart();
    window.onresize = () => {
      this.handleResize();
    };
  },
  methods: {
    handleSetChart() {
      this.myChart = this.echarts.init(this.$el, this.config.theme);
      this.initChartOption();
    },
    initChartOption() {
      this.buildPieOption();
    },
    buildPieOption() {
      let option = {
        ...this.option,
        series: [this.getSeriesItem()],
      };
      this.myChart.setOption(option);
    },
    handleResize() {
      this.myChart.resize();
    },
    getSeriesItem() {
      return {
        name: this.language[this.G_Locale].title,
        type: "pie",
        radius: this.config.radius,
        center: this.config.center,
        roseType: this.config.roseType,
        label: {
          show: this.config.label,
          color: "#fff",
          fontSize: responsiveSize(14),
        },
        labelLine: {
          show: this.config.labelLine,
          smooth: 0.2,
          length: responsiveSize(10),
          length2: responsiveSize(20),
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
        data: this.data,
      };
    },
  },
};
</script>

<style scoped></style>
